<template>
    <div class="wrapper">
        <div class="banner">
          <div style="background-color: #d40c14;height: 100rpx"></div>
<!--            <img src="http://file.rzkeji.com/web/dang/question_banner.png">-->
        </div>
        <div class="content">
            <div class="select-btn">
                <div class="btn" @click="pushToStart(questionRandom.id)">随机题库</div>
                <div @click="toQeustonSelect"  class="btn">选择题库</div >
            </div>
        </div>
    </div>
</template>

<script>
	/**
	 * @description 问题选择
	 */
    export default {
        data(){
            return{
                questionList: [],
                questionRandom:{},
            }
        },
        mounted(){
            this.getQuestionLis();
        },
        methods:{
			toQeustonSelect(){
				//跳转题库页
				uni.navigateTo({
					url:"/pages/questionSelect/questionSelect"
				})
			},
            async getQuestionLis(){
                let res = await this.$api.getQuestionsPackageList();
                if(res.data.level == "success"){
                    this.questionList = res.data.data;
                    this.getRandomQuestion();
                }
            },
            // 随机选题
            getRandomQuestion(){
                let index = Math.floor(Math.random() * this.questionList.length);
                this.questionRandom = this.questionList[index]
            },
            pushToStart(id){
				uni.navigateTo({
					url:`/pages/questionStart/questionStart?id=${id}`
				})
            }
        },
    }
</script>

<style scoped>
    .wrapper{
        width:100%;
        min-height: 100vh;
        background-color: #d40c14;
        background-size: 100% 100%;
    }

     .banner{
        width: 100%;
    }

    .banner img{
        width: 100%;
    }

    .content{
        width: 100%；
    }

    .content .select-btn{
        height: 10rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .content .select-btn .btn{
        margin-top:50px;
        background-color: orange;
        text-align: center;
        font-size: 16px;
        width: 80vw;
        padding: 10px;
        border-radius: 5px;
        color: white;
        border: none;
    }


</style>
